<!-- 首页 -->
<template>
	<mescroll-uni ref="mescrollRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
		<!-- <view :style="{paddingTop: CustomBar + 'px'}"></view> -->
	    <view class="topic-header">
	    	<view class="topic-title">推荐话题</view>
	    	<view class="topic-more" @click="notice">
				<view class="bell">
					<u-icon name="bell"></u-icon>
					<view class="tab-btn-dot" v-if="notice_num > 0">{{notice_num}}</view>
				</view>
			</view>
	    </view> 
		<topic-scroll @openTopic="openTopic" :dataList="hotTopicList"></topic-scroll>
	    <talk-list @menu="menu" @addParty="addParty" @thumb="thumb" @chat="chat" :dataList="dataList"></talk-list>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import {mapState} from 'vuex'
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	props:{
		
	},
	data() {
		return {
			CustomBar: this.CustomBar,
			hotTopicList: [],
			upOption:{
				auto:false, // 不自动加载
				page: {
				 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 	size: 20 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
			    textNoMore:'没有更多了'
			},
			dataList: [],
		};
	},
	computed: {
		...mapState(['vuex_user','notice_num']),
	},
	created() {
		this.getHotTopicList();
		uni.$on('indexworld',this.init);
	},
	destroyed() {
		// 注销全局配置监听
		uni.$off('indexworld');
	},
	methods: {
		init(e) {
			this.mescroll.resetUpScroll();
		},
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			var userId = uni.getStorageSync("userId");
			var scene = uni.getStorageSync("scene");
			this.$u.get('/wq/dynamic/list',{
				pageNum: mescroll.num,
				appId: this.website.appId,
				pageSize: mescroll.size,
				userId: userId,
				scene: scene,
				lon: this.vuex_user.lon,
				lat: this.vuex_user.lat,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/dynamic',
				params: {
					dynamicId: e.id,
				}
			});
		},
		addParty(e,run) {
			this.judgeLogin(() => {
				this.$u.post('/wq/dynamic/addParty',{
					id: e.id,
				}).then(res => {
					this.$u.toast('领取成功');
					run(true);
				});
			});
		},
		getHotTopicList() {
			var userId = uni.getStorageSync("userId");
			this.$u.get('/wq/topic/getHotTopic',{
				appId: this.website.appId,
				userId: userId,
			}).then(res => {
				this.hotTopicList = res.data;
			});
		},
		detail(index) {
			var voteId = this.list[index].id;
			this.$u.route({
				url: 'packgeMine/pages/vote/game/detail',
				params: {
					id: voteId,
				}
			});
		},
		notice() {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/index/notice',
				});
			});
		},
		clickSheet(sheet) {
			if('remove' == sheet.tag){
				this.deleteTopic(sheet.id);
			}else if('jubao' == sheet.tag){
				this.addBlack(sheet.userId);
			}else if('lahei' == sheet.tag){
				this.addBlackUser(sheet.userId);
			}
		},
		addBlack(userId) {
			this.$u.post('/system/user/addBlack',{
				userId: userId,
			}).then(res => {
				this.$u.toast('举报成功');
				//this.query();
			});
		},
		addBlackUser(userId) {
			this.$u.post('/system/user/addBlackUser',{
				userId: userId,
			}).then(res => {
				this.$u.toast('拉黑成功');
				//this.query();
			});
		},
		deleteTopic(id) {
			this.$u.get('/wq/dynamic/delete',{
				id: id,
			}).then(res => {
				this.mescroll.resetUpScroll();
			});
		},
		openTopic(topic) {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'pages/topic/index',
					params: {
						topicId: topic.id,
					}
				});
			});
		},
		thumb(e,i) {
			this.$u.post('/wq/dynamicGive/add',{
				dynamicId: e.id,
			}).then(res => {
				if(res.data){
					this.dataList[i].giveNum = this.dataList[i].giveNum + 1;
				}else{
					this.dataList[i].giveNum = this.dataList[i].giveNum - 1;
				}
			});
		},
		menu(e) {
			this.$emit('menu', e);
		},
		more() {
			this.$u.route({
				url: 'packgeMine/pages/vote/game/index',
			});
		},
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.topic-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic-title {
		font-size: 26rpx;
		font-weight: bolder;
	}
	.topic-more {
		font-size: 24rpx;
		color: #fff;
		background-color: #e3048f;
		padding: 6rpx 20rpx;
		border-radius: 20px;
		display: flex;
		align-items: center;
	}
	.wrap-box {
		padding: 0 15px;
	}
	.topic-right {
		display: flex;
		align-items: center;
	}
	.top-info {
		margin-right: 5px;
		color: #505152bd;
		font-size: 24rpx;
	}
	.loadmore-box{
		padding: 15px;
		padding-bottom: 70px;
	}
	.bell{
		position: relative;
	}
	.tab-btn-dot {
		background-color: #fa8206;
		position: absolute;
		top: -10rpx;
		right: -10px;
		z-index: 9;
		border-radius: 100%;
		font-size: 6px;
		padding: 15rpx;
		color: #fff;
		height: 10rpx;
		width: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
